<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .completed {
            text-decoration: line-through;
            color: red;
        }

        input[type="text"] {
            border: 1px solid royalblue;
        }
    </style>
</head>

<body>
    <input type="text">
    <button>addTodo</button>
    <ul class="todo">

    </ul>

    <script>

        let todoList = [
            { id: 1, todo: '学html、css', completed: true },
            { id: 2, todo: '精通javascript', completed: false },
            { id: 3, todo: '熟练vue', completed: false },
            { id: 4, todo: '攻克react', completed: false }
        ];
        let ul = document.getElementsByClassName('todo')[0];
        let addBtn = document.querySelector('button');
        let input = document.querySelector('input[type="text"]')

        function show() {
            let str = '';
            todoList.map((item) => {
                //item { id: 1, todo: '学html、css', completed: true }
                str += `
            <li class='${item.completed ? "completed" : ""}' data-id='${item.id}'>${item.todo}</li>
            `
            })
            ul.innerHTML = str;
        }
        show()


        //添加按钮的事件
        addBtn.addEventListener('click', () => {
            let value = input.value;
            if (value) {
                todoList.push({
                    id: todoList.length + 1,
                    todo: value,
                    completed: false
                })
                input.value = '';
            }
            //重新渲染
            show()
            console.log(todoList);

        })

        ul.addEventListener('click', function (event) {
            if (event.target.nodeName == 'LI') {
                //节点样式改变
                // event.target.classList.toggle('completed');
                //把li对应的那条数据的completed的值也要修改
                todoList.forEach((item) => {
                    console.log(event.target.dataset.id,item.id);
                    if (event.target.dataset.id == item.id) {
                        // item.completed = item.completed ? false : true;
                        // if(item.completed){
                        //     item.completed=false;
                        // }else{
                        //     item.completed=true;
                        // }
                        item.completed=!item.completed;
                    }
                })
                show()
                console.log(todoList);

            }


        })






    </script>

</body>

</html>